<!-- 网上报名 -->
<template>
  <div class="registration">
    <div class="registration-btn">
      <el-button type="primary" class="btn" @click="handclickback">
        <i class="el-icon-user-solid"></i>报名详情
      </el-button>
    </div>
    <div :class="['registration-main',{display:heiddn}]">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="744"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" width="225" type="index"></el-table-column>
        <el-table-column prop="name" label="名称" width="210"></el-table-column>
        <el-table-column prop="category" label="类别" width="210"></el-table-column>
        <el-table-column prop="object" label="面向对象" width="210"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="210"></el-table-column>
        <el-table-column prop="time" label="报名时间" width="210"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handclickbtn(scope.row)">报考</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">报考进度</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div :class="['signup',{display:show}]">
      <el-tabs v-model="activeName" @tab-click="handletabClick" stretch>
        <el-tab-pane label="1.报考须知" name="1">
          <div class="main-main-1">
            <p>
              一、考生须在开考前30分钟凭现代国际金融理财标准（上海）有限公司核发的本人准考证和本人有效身份证件到达指定考场，逐一接受监考人员安排的统一拍照。对号入座后将准考证和身份证件放在考桌左侧，以备监考人员随时核查。无准考证和身份证件的考生不得入场。
              <br />二、考场设有视频监控系统，将对考试全过程进行录像。
              <br />三、考试开始后，系统即自动计时，迟到考生时间不顺延。迟到30分钟以上的考生不得入场考试。开考后逾30分钟时未能在考试机上登录并确认的考生，视为缺考，考试系统将不再接受该准考证号登录。
              <br />四、考生只准携带有效身份证件、准考证及一台现代国际金融理财标准（上海）有限公司指定的财务计算器进入考试区。普通计算器不得带入考场。同时系统提供电子计算器用于财务计算和普通计算的运算功能。考生可选择使用鼠标方式或是数字键盘方式对其进行运算操作。
              <br />五、严禁考生将任何资料、纸张、文具、手表及各类具备储存及显示、扫描、拍摄、接发图像和文字功能的设备进入考场。关闭手机等通讯工具统一存放在考场指定位置。在考试进行期间，发现考生未按照规定将手机、手表等其他不允许携带的设备带入考试区，以及所携带的物品在考场任何位置发出声音干扰考试者，以违纪论处。
              <br />六、考场为考生统一提供演算草稿纸及演算笔。考生在演算草稿纸上必须填写自己的姓名及准考证号，考试结束后由监考人员统一收回。
              <br />七、考生在考试中应严格遵守考场纪律，保持考场肃静，服从监考人员的安排与要求，不得在考场内吸烟、随意走动、相互交谈。遇到问题可举手向监考人员询问，但不得涉及试卷内容。
              <br />八、考生在考试期间如需去洗手间，应向监考人员举手示意，在得到监考人员允许后由工作人员陪同出入考场。
              <br />九、除第八条情况外，考生不得中途退场。考试终了前30分钟考生方可交卷。提前交卷时须举手示意，经监考人员许可后离开座位并安静退出考场。严禁抄录试题，演算草稿纸必须上交监考人员，不得带出考场，违者按作弊论处。提前交卷退场者需服从监考人员指挥，不得在考场附近逗留、喧哗。
              <br />十、考生因生病等其他情况需要临时休息的，需征得本考点主考人同意，由本考点主考人指派的专人陪同；不能继续坚持考试的，应停止考试。
              <br />十一、考生在考试期间违规、违纪的，按照《考生违纪行为认定及处理办法》进行处理。
            </p>
            <div class="main-main-1-btn">
              <el-button style="margin-top: 5px;" @click="handnoagree">不同意</el-button>
              <el-button style="margin-top: 5px;" @click="handclicknext">同意</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="2.填写信息" name="2">
          <div class="main-main-2">
            <div class="careful">填写前请确认报考科目信息，标*号的为必填项，图片上传要结合格式要求：</div>




            <div class="from">
              <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" required>
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="类别" required>
                  <el-input v-model="ruleForm.category"></el-input>
                </el-form-item>
                <el-form-item label="报名时间" required>
                  <el-col :span="11">
                    <el-form-item>
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date1"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item>
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date2"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="姓名" required>
                  <el-input v-model="ruleForm.fullname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" required>
                  <el-input v-model="ruleForm.id"></el-input>
                </el-form-item>
                <el-form-item label="性别" required>
                  <el-input v-model="ruleForm.gender"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-top: 12px;" @click="handclicknoagree">取消</el-button>
                  <el-button style="margin-top: 12px;" @click="handclicknext">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="3.信息确认" name="3">
          <div class="main-main-3">
            <div class="careful">请再次确认个人信息，确认无误后点击提交审核：</div>
            <div class="confirm">
              <el-form :model="ruleForm" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" required>
                  <el-input v-model="ruleForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类别" required>
                  <el-input v-model="ruleForm.category" disabled></el-input>
                </el-form-item>
                <el-form-item label="报名时间" required>
                  <el-col :span="11">
                    <el-form-item>
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date1"
                        style="width: 100%;"
                        disabled
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item>
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date2"
                        style="width: 100%;"
                        disabled
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="姓名" required>
                  <el-input v-model="ruleForm.fullname" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" required>
                  <el-input v-model="ruleForm.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="性别" required>
                  <el-input v-model="ruleForm.gender" disabled></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-top: 12px;" @click="handclicknoagree">取消</el-button>
                  <el-button style="margin-top: 12px;" @click="handclickagree">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="4.缴费" name="4">
          <div class="main-main-4">
            <el-table
              ref="multipleTable"
              :data="ruleForm2"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              height="744"
            >
              <el-table-column prop="id" label="身份证号" width="400"></el-table-column>
              <el-table-column prop="fullname" label="姓名" width="400"></el-table-column>
              <el-table-column prop="state" label="状态" width="400"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="handclickpay(scope.$index,scope.row)" class="completed"
                  >缴费</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="5.准考证" name="5">
          <div class="main-main-5" v-if="pay==true" >
            <p class="p1">普通话水平测试</p>
            <p class="p2">准考证</p>
            <table>
              <tr>
                <td>姓名:</td>
                <td>{{ruleForm3.fullname}}</td>
                <td rowspan="6" colspan="2">照片</td>
              </tr>
              <tr>
                <td>性别:</td>
                <td>{{ruleForm3.gender}}</td>
              </tr>
              <tr>
                <td>身份证号:</td>
                <td>{{ruleForm3.id}}</td>
              </tr>
              <tr>
                <td>考点:</td>
                <td>芜湖职业技术学院</td>
              </tr>
              <tr>
                <td>考场:</td>
                <td>第36考场</td>
              </tr>
              <tr>
                <td>考号:</td>
                <td>11301400021</td>
              </tr>
              <tr>
                <td colspan="2">考试科目</td>
                <td colspan="2">考试时间</td>
              </tr>
              <tr>
                <td colspan="2">{{ruleForm3.name}}</td>
                <td colspan="2">2020-10-9(14:00-16:00)</td>
              </tr>
            </table>
            <p class="p3">考生须知</p>
            <div class="ticket">
              <p>
                一、考生须在开考前30分钟凭现代国际金融理财标准（上海）有限公司核发的本人准考证和本人有效身份证件到达指定考场，逐一接受监考人员安排的统一拍照。对号入座后将准考证和身份证件放在考桌左侧，以备监考人员随时核查。无准考证和身份证件的考生不得入场。
                <br />二、考场设有视频监控系统，将对考试全过程进行录像。
                <br />三、考试开始后，系统即自动计时，迟到考生时间不顺延。迟到30分钟以上的考生不得入场考试。开考后逾30分钟时未能在考试机上登录并确认的考生，视为缺考，考试系统将不再接受该准考证号登录。
                <br />四、考生只准携带有效身份证件、准考证及一台现代国际金融理财标准（上海）有限公司指定的财务计算器进入考试区。普通计算器不得带入考场。同时系统提供电子计算器用于财务计算和普通计算的运算功能。考生可选择使用鼠标方式或是数字键盘方式对其进行运算操作。
                <br />五、严禁考生将任何资料、纸张、文具、手表及各类具备储存及显示、扫描、拍摄、接发图像和文字功能的设备进入考场。关闭手机等通讯工具统一存放在考场指定位置。在考试进行期间，发现考生未按照规定将手机、手表等其他不允许携带的设备带入考试区，以及所携带的物品在考场任何位置发出声音干扰考试者，以违纪论处。
                <br />六、考场为考生统一提供演算草稿纸及演算笔。考生在演算草稿纸上必须填写自己的姓名及准考证号，考试结束后由监考人员统一收回。
                <br />七、考生在考试中应严格遵守考场纪律，保持考场肃静，服从监考人员的安排与要求，不得在考场内吸烟、随意走动、相互交谈。遇到问题可举手向监考人员询问，但不得涉及试卷内容。
                <br />八、考生在考试期间如需去洗手间，应向监考人员举手示意，在得到监考人员允许后由工作人员陪同出入考场。
                <br />九、除第八条情况外，考生不得中途退场。考试终了前30分钟考生方可交卷。提前交卷时须举手示意，经监考人员许可后离开座位并安静退出考场。严禁抄录试题，演算草稿纸必须上交监考人员，不得带出考场，违者按作弊论处。提前交卷退场者需服从监考人员指挥，不得在考场附近逗留、喧哗。
                <br />十、考生因生病等其他情况需要临时休息的，需征得本考点主考人同意，由本考点主考人指派的专人陪同；不能继续坚持考试的，应停止考试。
                <br />十一、考生在考试期间违规、违纪的，按照《考生违纪行为认定及处理办法》进行处理。
              </p>
            </div>
            <el-button style="margin-top: 2px;" @click="handclickprinting">打印</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  data() {
    return {
      //准考证
      ruleForm3: {},
      //缴费
      pay: "",
      ruleForm2: [],
      //确认个人信息
      ruleForm: {},
      //消失出现
      show: true,
      heiddn: false,
      //tab栏
      activeName: "1",
      index: 1,
      //原始数据
      tableData:[],
      multipleSelection: [],
    };
  },
  methods: {
    handnoagree() {
      this.show = !this.show;
      this.heiddn = !this.heiddn;
    },
    handclicknoagree() {
      this.index = this.index - 1;
      this.activeName = this.index.toString();
    },
    handclickagree() {
      if (this.index > 4) {
        this.index = 4;
      }
      this.index++;
      this.activeName = this.index.toString();
      const obj = {};
      for (let key in this.ruleForm) {
        obj[key] = this.ruleForm[key];
        if (
          key == "name" ||
          key == "category" ||
          key == "date1" ||
          key == "date2" ||
          key == "remarks" ||
          key == "object" ||
          key == "time" ||
          key == "state"
        ) {
          continue;
        }
        this.ruleForm[key] = "";
      }
      if (obj.id == "") {
        return;
      }
      this.ruleForm2.push(obj);
    },
    handclickpay(index, row) {
      if (this.index > 4) {
        this.index = 4;
      }
      this.index++;
      this.activeName = this.index.toString();
      this.pay = true;
      const obj = {};
      for (let key in row) {
        obj[key] = row[key];
      }
      this.ruleForm3 = obj;
     
      document.querySelector(".completed").innerHTML="缴费完成"
      document.querySelector(".completed").disabled="disabled"
    },
    handclicknext() {
      if (this.index > 4) {
        this.index = 4;
      }
      this.index++;
      this.activeName = this.index.toString();
    },
    handletabClick(tab) {
      this.activeName = tab.name;
      this.index = tab.name;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //报考进度
    handleDelete(index, row) {
      this.show = !this.show;
      this.heiddn = !this.heiddn;
      this.ruleForm = row;
      console.log(row);
      console.log(index);
      console.log(this.activeName);
    },
    handclickbtn(row) {
      this.show = !this.show;
      this.heiddn = !this.heiddn;
      this.ruleForm = row;
      this.activeName = "1";
      this.index = 1;
    },
    handclickback() {
      this.show = !this.show;
      this.heiddn = !this.heiddn;
    },
    //打印
    handclickprinting() {
      this.pay = false;

    },
  },
    created() {
      this.$http.get("/wy/onlineregistration").then((res)=>{
        console.log(res);
           this.tableData=res.__root_
      })
    },
};
// export default {
//   //import引入的组件需要注入到对象中才能使用
//   components: {},
//   data() {
//     //这里存放数据
//     return {};
//   },
//   //监听属性 类似于data概念
//   computed: {},
//   //监控data中的数据变化
//   watch: {},
//   //方法集合
//   methods: {},
//   //生命周期 - 创建完成（可以访问当前this实例）
//   created() {},
//   //生命周期 - 挂载完成（可以访问DOM元素）
//   mounted() {},
//   beforeCreate() {}, //生命周期 - 创建之前
//   beforeMount() {}, //生命周期 - 挂载之前
//   beforeUpdate() {}, //生命周期 - 更新之前
//   updated() {}, //生命周期 - 更新之后
//   beforeDestroy() {}, //生命周期 - 销毁之前
//   destroyed() {}, //生命周期 - 销毁完成
//   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
// };
</script>
<style lang='less'  scoped>
.registration-btn {
  width: 100%;
  height: 70px;
  position: relative;
}
.btn {
  float: right;
  margin-top: 16px;
  margin-right: 10px;
}
.main-main-1 {
  width: 656px;
  height: 658px;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: left;
}
.main-main-2 {
  width: 656px;
  height: 658px;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}
.main-main-3 {
  width: 656px;
  height: 658px;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}
.main-main-5 {
  width: 560px;
  height: 680px;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  font-size: 10px;
}
.main-main-4{
  width: 100%;
  height: 500px;
}
.main-main-1-btn {
  text-align: center;
}
.p1,
.p2,
.p3 {
  font-weight: 700;
}
.ticket {
  text-align: left;
}
.ticket p {
  font-weight: none;
}
.signup {
  position: absolute;
  top: 150px;
  left: 56px;
  width: 1548px;
  
}
.display {
  display: none;
}
.careful {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.from {
  width: 580px;
  height: 460px;
  margin-top: 40px;
}
.confirm {
  width: 580px;
  height: 460px;
  margin-top: 40px;
}
.main-main-5 table {
  text-align: center;
  border: 1px solid #ccc;
  width: 456px;
  margin: 0 auto;
  border-collapse: collapse;
}
.main-main-5 table td {
  border: 1px solid #ccc;
}
.main-main-5 table tr {
  height: 22px;
}
</style>